<template>
    <div style="min-width:809px">
       <div v-if="$route.path == '/personalAdmin/feedback'">
        <div class="vs-search-box" style="padding: 24px 22px 0 0px;">
            <el-form ref="form" :inline="true" :model="form" label-width="90px">
                <el-form-item label="门店">
                    <el-select v-model="paging.store_id" placeholder="请选择" >
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期：">
                        <el-date-picker
                        @change="setDate"
                        v-model="value1"
                        value-format="timestamp"
                        style="width:250px"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="类型">
                    <el-select v-model="tableData.type" placeholder="请选择">
                        <el-option
                            v-for="item in tableData"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="类型" prop="paging" >
                    <el-select v-model="paging.type" placeholder="请选择类型">
                        <el-option label="建议" :value="1"> </el-option>
                        <el-option label="投诉" :value="2"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="员工姓名" >
                    <el-input v-model="paging.name" class="name"></el-input>
                </el-form-item>
                <el-form-item label="" class="vs-right-btns">
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
            <!-- <div class="right">
                <el-button  @click="reset">重置</el-button>
                <el-button  type="primary" @click="handleCurrentChange(1)">查询</el-button>
            </div> -->
         </div>
        <div class="vs-table-box">
            <div class="operation-box">
                <!-- <el-button icon="el-icon-upload2">导出</el-button>
                 -->
                 <el-button class="left-auto" @click="derive" :loading="isDerive" icon="el-icon-download" size="medium" >导出</el-button>
            </div>
            <el-table :header-cell-style="{background:'#f5f6f8'}" v-loading="loading" :data="tableData"  style="width: 100%">
                <el-table-column prop="num" label="序号" width="50"> </el-table-column>
                <el-table-column prop="type" label="类型" width="60">
                    <template slot-scope="scope">
                        <div>
                            <span v-if="scope.row.type==1">建议</span>
                            <span v-else>投诉</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="时间" width="160"> </el-table-column>
                <el-table-column prop="staff_name" label="员工昵称"> </el-table-column>
                <el-table-column prop="content" min-width="150" label="反馈内容">
                    <template slot-scope="scope" >
                        <span class="line-3">{{scope.row.content}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="reply" min-width="150" label="回复内容">
                    <template slot-scope="scope" >
                        <span class="line-3">{{scope.row.reply}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" width="140" label="操作"> 
                    <template slot-scope="scope">

                        <span class="tab-table-text" @click="setDatee(2,scope.row)">详情</span>
                        <span v-if="!scope.row.reply" class="tab-table-text btnClick" @click="setDatee(1,scope.row)" >回复</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange" 
                    :current-page.sync="pagination.page" 
                    :page-size="pagination.page_size" 
                    layout="sizes,prev, pager, next, jumper" 
                    :total="pagination.total">
                    </el-pagination>
            </div>
        </div>
       </div>
       <router-view></router-view>
    </div>
</template>

<script>

export default {

    data() {
        
        return {
            value1:'',
            form:{
                username:'',
                date:''
            },
            pagination:{
                page:1,//    当前页面
                page_size:10, //页面条数
                total:0,    //数据总数
            },
            loading:false,
            paging:{
                store_id:'',//门店id
                staff_name:'',//员工姓名
                type:'',//类型
                start_time: '',//开始时间
                end_time: '',//结束时间
                page: 1,
                total: 0,
                limit: 10,
                reply:''
            },
            isDerive:false,
            tableData:[],
            shopList:[],
            classList:[]
        };
    },
    filters:{
        typeName(val){
            switch (val) {
                case 1:
                    val = '内部'
                    break;
                case 2:
                    val = '外部'
                    break;
            }
            return val;
        }
    },
    created() { 
        this.homegetStore()
    },
    mounted() {
        this.feedback();
    },
    methods: {
        setDatee(type,row){
            if(type == 1){
                this.$router.push(`/personalAdmin/feedback/reply?title=投诉信息&id=${row.id}`)
            }else {
                this.$router.push(`/personalAdmin/feedback/reply?type=1&title=投诉信息&id=${row.id}`)
            }
        },
        async derive(){
            this.isDerive = true;
            let res = await this.$Http.feedbackExport(this.paging);
            this.utils.downloadXlsx(res,'员工反馈')
            this.isDerive = false;
        },
        async feedback() {
            this.loading = true;
            this.paging.page = this.pagination.page
            this.paging.total = this.pagination.total
            this.paging.limit = this.pagination.page_size
            let { code, data } = await this.$Http.feedback(this.paging);
            console.log(123123,this.tableData);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.pagination.page = data.current_page
                this.pagination.total = data.total
            }
        },

        async homegetStore(){//获取门店
            console.log(22334,this.shopList);
            this.paging.store_id = this.shopList.id
            this.loading = true;
            let { code,data } = await this.$Http.homegetStore(this.paging);
            if(code){
                // this.paging.store_id = data.length?data[0].id:''
                this.shopList = data;
                this.handleCurrentChange();
            }
        },
        setDate(e){
            console.log(e);
            if(e&&e.length){
                this.paging.start_time = e[0]/1000;
                this.paging.end_time = e[1]/1000
            }else{
                this.paging.start_time = '';
                this.paging.end_time = ''
            }
        },
        pickerDate(){
            
        },
        change(){

        },
        reset() {//重置
            this.value1 = '';
            this.paging = Object.assign(this.paging,{store_id:'',end_time:'',start_time:'',name:'',type:''})
            this.handleCurrentChange(1)
        },
        
        handleSizeChange(val) {
            this.paging.limit = val;
            this.feedback()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.feedback()
        }
    },
};
</script>

<style lang="scss" scoped>

.image-thumbnail{
    width: 130px;
    height: 130px;
}
.vs-search-box{
    display: flex;
    padding-right: 22px;
    justify-content: space-between;
    .right{
        width: 150px;
    }
}
.red{
    color: #f00 !important;
}
.operation-box{
    display: flex;
    justify-content: flex-end;
}
.name{
    width: 201px;
}
</style>